import React, { Component } from 'react';
import './Tabs.scss'
class Tabs extends Component {
    constructor(props){
        super(props)
        this.state={
            currentIndex:0,
            list:['综合','销量','新品','价格','筛选']
        }
    }
    handleClick=(index)=>{
        this.setState({
            currentIndex:index
        })
    }
    render() {
        return (
            <div className='tabs'>
                {
                    this.state.list.map((item,index)=>{
                        return (<span key={index} onClick={()=>{this.handleClick(index)}}
                                style={{color:this.state.currentIndex === index ? "red" : ''}}
                        >{item}</span>)
                    }) 
                }
                
            </div>
        );
    }
}

export default Tabs;